import React, {Component} from "react";
import {ActivityIndicator, StyleSheet, Text, View} from "react-native";

let pageNo = 1;
let totalPage = 3;
let itemNo = 0;
let refreshTime = 3;

let stringUrl = "http://116.62.173.197:8881/sumSchool/order/orderCourse";
let bodyParas = {
    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW5TY2hvb2xfaXNzIjoiU2VydmljZSIsIm9wZW5pZCI6InRlc3QxMjMiLCJvcGVuaWRNZDUiOiJjYzAzZTc0N2E2YWZiYmNiZjhiZTc2NjhhY2ZlYmVlNSIsInN1blNjaG9vbF91c2VySWQiOiI1NyIsImV4cCI6MTg2ODI0MDcyMSwiaWF0IjoxNTUyODgwNzIxLCJzdW5TY2hvb2xfYXVkIjoiQVBQIn0.Gka1XMVLDyuIVVjwyeQgB_aMr4eAW3jN-5Ku1vMCp00',
    page: '1',
    pageSize: '2'
};

export default class RefreshList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isRefresh : false,
            isError : false,
            dataArray: [],
            text:'',
        }
    }

    getData(stringUrl,bodyParas){
        fetch(stringUrl,{
            method: "post",
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify(
                bodyParas
            )})
            .then(response => response.json())
            .then(data => {
                this.setState({
                    isRefresh: false,
                    text : JSON.stringify(data),
                });

                //console.log("data is ",data);
                //JSON.parse() 将 字符串转换为 JavaScript 对象:
                //JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串
                console.log("data is ",JSON.stringify(data));
            })
            .catch(error => {
                if (error.status === 404) {
                    // do something about 404
                }
                this.setState({
                    isError: true,
                });
                console.log('error is:', error.statusText)
            });
    }

    componentDidMount() {
        //这里请求数据
        this.setState({
            isRefresh: true,
        });
        this.getData(stringUrl,bodyParas);

    }

    renderLoadingView(){
        return (
            <View style={styles.loadContainer}>
                <ActivityIndicator
                    animating={true}
                    color='red'
                    size="large"
                />
                <Text style={styles.loadText}>加载中</Text>
            </View>
        );
    }

    renderErrorView(){
        return (
            <View style={styles.errorContainer}>
                <Text style={styles.errorText}>错误</Text>
            </View>
        );
    }

    renderCompleteView(){
        return (
            <View style={styles.completeContainer}>
                <Text>完成{this.state.text}</Text>
            </View>
        );
    }

    render() {
        if(this.state.isRefresh && !this.state.isError){
            return this.renderLoadingView();
        }else if(this.state.isError){
            return this.renderErrorView();
        }else{
            return this.renderCompleteView();
        }
    }
}

const styles = StyleSheet.create({
    loadContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    errorContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#c8c8c8',
    },

    completeContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    loadText: {
        color: '#c8c8c8',
        fontSize: 20,
        marginLeft: 20,
    },

    errorText: {
        color: 'red',
        fontSize: 20,
    },
});














